<template>
    <div>我是首页</div>
    <p v-focus>自定义指令</p>
    <p v-focus>自定义指令1</p>
    <p>
        <input type="text" v-focusinp>
    </p>
    <div v-if="flag" @click="flag = !flag">
        <p id="p1" v-bgcolor="'green'" @click="count++">指令的生命周期钩子函数--{{ count }}</p>
    </div>
    <!-- 使用全局组件 -->
    <p v-font30="50">使用全局自定义指令</p>
</template>
<script>
// 介绍自定义指令
// 自定义指令的生命周期钩子函数
// 钩子函数 定义: 就是不需要手动调用, 会自动在某一个时间点自动调用的函数
// created:
// 
export default {
    data() { // 定义数据的
        return {
            count: 100,
            flag: true
        }
    },
    methods: { // 定义该组件的方法的

    },
    directives: { // 注册自定义指令
        focus: { // focus 指令名
            mounted(el) {
                // el: 就是绑定指令的标签元素
                // console.log(el);
                el.style.color = 'red'
            }
        },
        focusinp: {
            mounted(el) {
                el.focus()
            }
        },
        bgcolor: {
            created(el, binding, vdnode, prevnode) {
                console.log('created', el, binding, vdnode, prevnode);
                el.style.background = binding.value
                // 执行时间: 当该指令一绑定元素的时候, 就触发
                // 特点: 在该阶段, 当前标签el还没有挂载到父节点,获取不到
                // console.log(el.parentElement);
                // binding: 指令参数的对象
                // vdnode 虚拟dom 
                // prevnode :就是上一次的虚拟dom
                document.onclick = () => {
                    console.log('document');
                }
            },
            beforeMount(el, binding, vdnode, prevnode) {
                console.log('beforeMount', el, binding, vdnode);
                // 执行时间: 当前绑定该指令的节点挂载到父节点之前
                // 获取不到父节点
                // console.log(el.parentElement);
            },
            mounted(el, binding, vdnode) {
                console.log('mounted', el, binding, vdnode);
                console.log(el.parentElement);
                // 执行时间: 该阶段绑定指令的节点已经挂载 到了父节点, 
                // 特点: 可以获取倒排父节点
            },
            beforeUpdate(el, binding, vdnode) {
                // console.log('beforeUpdate', el, binding, vdnode);
                // console.log(document.querySelector('#p1').innerHTML); // 上一次的值
                // 执行时间: 绑定该指令的dom上的数据更新时, 触发
                // 特点: 此时最新的虚拟dom 已经生成, 但是还没有转成真实dom
            },
            updated(el, binding, vdnode) {
                // console.log('updated', el, binding, vdnode);
                // console.log(document.querySelector('#p1').innerHTML);
                // 执行时间: 数据已经更新完毕, 并且dom已经更新完毕并重新挂载父节点
                // 特点: 可以获取最新的dom,虚拟dom 已经转成了真实dom
            },
            beforeUnmount(el, binding, vdnode) {
                console.log('beforeUnmount', el, binding, vdnode);
            },
            unmounted(el, binding, vdnode) {
                console.log('unmounted', el, binding, vdnode);
                document.onclick = null
            }

        }
    }

}
</script>